<template>
	<div class="indexDetail">
		<div class="top">
			<div class="top-left">
				<div class="left-bar">{{ videosObj.vTitle }}</div>
				<div class="top-bar">4.0万播放 · 总弹幕数13 2021-07-10 01:06:34</div>
			</div>
			<div class="top-right">
				<div>
					<img class="Img" :src="videosObj.coverPic" alt="" />
				</div>
				<div class="text">
					<span><a href="">空灵雨迹</a></span>
					<span><a href="">发消息</a></span>
				</div>
				<div class="text-nav">有一定日语翻译能力的小伙伴，请参加测试群</div>
				<div class="text-bar">+ 关注47.2万</div>
			</div>
		</div>
		<div class="main">
			<!-- 视频播放 -->
			<div class="main-video">
				<div class="video-wrap">
					<video
						style="width: 100%; height: 100%"
						autoplay
						controls="true"
						:src="videosObj.videoUrl"
					></video>
					<!-- 	<div class="jingdutiao">
						<div class="jindu">
							<div class="inner">
								<div class="inner-wrap"></div>
							</div>
						</div>

						<div class="bofang"></div>
					</div> -->
				</div>
				<div class="main-bar">
					<div class="main-bar-title">1人正在看,已装填13条弹幕</div>
					<form class="form">
						<input type="text" placeholder="请先答题 转正" />
						<button>发送</button>
					</form>
				</div>
				<div class="video-desc">
					<span>{{ videosObj.vDetail }}</span>
					<li class="tag">
						<div>
							<a
								href="//search.bilibili.com/all?keyword=%E6%97%A5%E7%AC%A0%E9%98%B3%E5%AD%90&amp;from_source=video_tag"
								target="_blank"
								class="tag-link"
							>
								{{ commentObj[0].tag }}
							</a>
						</div>
					</li>
					<li class="tag">
						<div>
							<a
								href="//search.bilibili.com/all?keyword=%E6%97%A5%E7%AC%A0%E9%98%B3%E5%AD%90&amp;from_source=video_tag"
								target="_blank"
								class="tag-link"
							>
								{{ commentObj[1].tag }}
							</a>
						</div>
					</li>
					<li class="tag">
						<div>
							<a
								href="//search.bilibili.com/all?keyword=%E6%97%A5%E7%AC%A0%E9%98%B3%E5%AD%90&amp;from_source=video_tag"
								target="_blank"
								class="tag-link"
							>
								{{ commentObj[2].tag }}
							</a>
						</div>
					</li>
					<li class="tag">
						<div>
							<a
								href="//search.bilibili.com/all?keyword=%E6%97%A5%E7%AC%A0%E9%98%B3%E5%AD%90&amp;from_source=video_tag"
								target="_blank"
								class="tag-link"
							>
								{{ commentObj[3].tag }}
							</a>
						</div>
					</li>
				</div>
				<!-- 发表评论 -->
				<div class="common">
					<div class="common-head">295评论</div>
					<div class="common-send">
						<div class="user-face">
							<img
								class="bili-avatar-img"
								:src="commentObj[1].textPic"
								alt=""
							/>
						</div>
						<div class="user-arrow">
							<textarea
								v-model="username"
								name=""
								id=""
								cols="80"
								rows="4"
								placeholder="发一条友善的评论"
								class="ipt-txt"
							></textarea>
							<button class="common-submit" @click="addComment">
								发表评论
							</button>
						</div>
					</div>
					<!-- 评论 -->
					<div
						class="list-item"
						v-for="comment in commentObj"
						:key="comment.uid"
					>
						<!-- 评论首图 -->
						<div class="user-face">
							<a
								href="//space.bilibili.com/110175256"
								target="_blank"
								data-usercard-mid="110175256"
							>
								<div
									class="bili-avatar"
									style="
										width: 48px;
										height: 48px;
										transform: translate(0px, 0px);
									"
								>
									<img
										class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
										:src="commentObj[2].textPic"
										alt=""
									/>

									<span
										class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-48"
									></span>
								</div>
							</a>
						</div>
						<!-- 评论内容 -->
						<div class="user">
							<a
								data-usercard-mid="110175256"
								href="//space.bilibili.com/110175256"
								target="_black"
								class="name"
								style="color: #fb7299"
								>鳶尾愛麗絲</a
							>
							<a
								class="level-link"
								href="//www.bilibili.com/blackboard/help.html#%E4%BC%9A%E5%91%98%E7%AD%89%E7%BA%A7%E7%9B%B8%E5%85%B3"
								target="_blank"
								><img
									class="level"
									src="//s1.hdslb.com/bfs/seed/jinkela/commentpc/static/img/ic_user level_5.a92f1e7.svg"
							/></a>
							<div>{{ comment.text }}</div>
							<div>2021-07-12 18:29</div>
						</div>

						<div class="reply-item">
							<a
								href="//space.bilibili.com/134594116"
								data-usercard-mid="134594116"
								target="_blank"
								class="reply-face"
								style="top: 0px"
							>
								<div class="bili-avatar">
									<img
										class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
										style="
											width: 24px;
											height: 24px;
											margin-left: 30px;
											margin-top: 20px;
										"
										:src="commentObj[2].textPic"
										alt=""
									/>

									<span
										class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-24"
									></span>
									<a
										data-usercard-mid="134594116"
										href="//space.bilibili.com/134594116"
										target="_black"
										class="name"
										style="color: "
										>太多繁琐的</a
									>
									<a
										class="level-link"
										href="//www.bilibili.com/blackboard/help.html#%E4%BC%9A%E5%91%98%E7%AD%89%E7%BA%A7%E7%9B%B8%E5%85%B3"
										target="_blank"
									>
										<img
											class="level senior"
											src="//s1.hdslb.com/bfs/seed/jinkela/commentpc/static/img/ic_user level_6+.e7b4001.svg"
										/>
									</a>
									<span class="text-con">{{ comment.textCon }}</span>
									<div class="text-info">2021-07-12 20:02</div>
								</div>
							</a>
						</div>
						<div class="reply-item">
							<a
								href="//space.bilibili.com/134594116"
								data-usercard-mid="134594116"
								target="_blank"
								class="reply-face"
								style="top: 0px"
							>
								<div class="bili-avatar">
									<img
										class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
										style="
											width: 24px;
											height: 24px;
											margin-left: 30px;
											margin-top: 20px;
										"
										:src="commentObj[3].textPic"
										alt=""
									/>

									<span
										class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-24"
									></span>
									<a
										data-usercard-mid="134594116"
										href="//space.bilibili.com/134594116"
										target="_black"
										class="name"
										style="color: "
										>无心君王</a
									>
									<a
										class="level-link"
										href="//www.bilibili.com/blackboard/help.html#%E4%BC%9A%E5%91%98%E7%AD%89%E7%BA%A7%E7%9B%B8%E5%85%B3"
										target="_blank"
									>
										<img
											class="level senior"
											src="//s1.hdslb.com/bfs/seed/jinkela/commentpc/static/img/ic_user level_6+.e7b4001.svg"
										/>
									</a>
									<span class="text-con">魔界复兴？</span>
									<div class="text-info">2021-07-12 20:02</div>
								</div>
							</a>
						</div>
						<div class="reply-item">
							<a
								href="//space.bilibili.com/134594116"
								data-usercard-mid="134594116"
								target="_blank"
								class="reply-face"
								style="top: 0px"
							>
								<div class="bili-avatar">
									<img
										class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
										style="
											width: 24px;
											height: 24px;
											margin-left: 30px;
											margin-top: 20px;
										"
										:src="commentObj[1].textPic"
										alt=""
									/>

									<span
										class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-24"
									></span>
									<a
										data-usercard-mid="134594116"
										href="//space.bilibili.com/134594116"
										target="_black"
										class="name"
										style="color: "
										>瑞特土豆粉</a
									>
									<a
										class="level-link"
										href="//www.bilibili.com/blackboard/help.html#%E4%BC%9A%E5%91%98%E7%AD%89%E7%BA%A7%E7%9B%B8%E5%85%B3"
										target="_blank"
									>
										<img
											class="level senior"
											src="//s1.hdslb.com/bfs/seed/jinkela/commentpc/static/img/ic_user level_6+.e7b4001.svg"
										/>
									</a>
									<span class="text-con">魔界复兴？</span>
									<div class="text-info">2021-07-12 20:02</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- 右侧栏  -->
			<div class="mainList">
				<div class="mainList-top">
					<span class="title"
						>弹幕列表
						<div class="title-select"></div>
					</span>
					<span>:</span>
					<span>展开</span>
				</div>
				<div class="mainList-dark">
					<a href="">
						<img :src="videoList[2].coverPic" alt="" />
						<span>{{ videoList[2].vTitle }}</span>
					</a>
				</div>
				<div class="mainList-nav">
					<div>视频选集(1/2)</div>
					<div>
						<span class="button">1</span>
						<span>2</span>
						<span>3</span>
					</div>
				</div>

				<div class="main-watch" v-for="video in videoList" :key="video.vid">
					<div class="pic">
						<a href="https://www.bilibili.com/bangumi/play/ss39461">
							<img :src="video.coverPic" alt="" />
						</a>
					</div>
					<div class="info">
						<a href="https://www.bilibili.com/bangumi/play/ss39461">{{
							video.vTitle
						}}</a>
						<div class="desc">哔哩哔哩番剧</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import axios from "axios";
export default {
	name: "DetailComp",
	data() {
		return {
			/* 获取视频列表 */
			videosObj: {},
			// 获取评论列表
			commentObj: [],
			// 视频分类
			videoList: [],
			username: "",
		};
	},
	async mounted() {
		console.log(this.$route.query);
		// 获取视频id
		const result = await axios({
			url: "/api/videoDetail",
			params: {
				vid: /* "vid1025" */ this.$route.query.vid,
			},
			method: "get",
		});
		console.log(this.$route.query.vid);
		this.videosObj = result.data.data;
		console.log("videosObj", this.videosObj);

		// 获取评论列表
		const comment = await axios({
			url: "/api/comment",
			params: {
				vid: this.videosObj.vid,
			},
			method: "get",
		});
		this.commentObj = comment.data.data[0].comment;
		console.log("comment", comment);

		// 获取视频分类列表
		const reCommentVideo = await axios({
			url: "/api/recommentVideo",
			params: {
				vType: this.videosObj.vType,
			},
			method: "get",
		});
		console.log("reCommentVideo", reCommentVideo);
		this.videoList = reCommentVideo.data.data;
	},
};
</script>

<style scoped>
.indexDetail {
	width: 990px;
	height: 100%;
	margin: 0 auto;
	/* border: 1px solid black; */
}
.top {
	display: flex;
	justify-content: space-between;
	width: 990px;
	height: 96px;
}
.text span {
	padding-right: 40px;
}
.text span a {
	color: #212121;
}
.top-left {
	margin-top: 27px;
}
.left-bar {
	font-size: 18px;
	color: #212121;
}
.top-bar {
	margin: 8px 0 0 9px;
	font-size: 12px;
	color: #999;
}
.text-nav {
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}
.top-right {
	/* 	display: flex;
	justify-content: space-between; */
	margin-top: 10px;
	width: 320px;
	height: 80px;
	/* border: 1px solid black; */
}

.top-right .Img {
	float: left;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.text-bar {
	width: 146px;
	height: 27px;
	margin-top: 5px;
	text-align: center;
	line-height: 27px;
	background-color: #00a1d6;
	margin-left: 48px;
	color: #fff;
}
.main {
	display: flex;
	justify-content: space-between;
}
/* 视频播放 */
.main-video {
	width: 638px;
	height: 445px;
	/* 	border: 1px solid black; */
}
.video-wrap {
	position: relative;
	width: 638px;
	height: 359px;
	cursor: pointer;
	/* border: 1px solid black; */
	background-color: #999;
}

.jindu {
	/* position: absolute; */
	width: 550px;
	height: 1px;
	margin-top: 160px;
	margin-left: 40px;
	border: 1px solid white;
}
.inner {
	position: relative;
	width: 30%;
	height: 1px;
	background-color: red;
}
.inner .inner-wrap {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	top: -5px;
	left: 50%;
	background-color: #fff;
}

.bofang {
	position: absolute;
	bottom: 1%;
}
.main-bar {
	display: flex;
	justify-content: space-between;
	/* 	width: 638px; */
	height: 46px;
	margin: 0 20px;
	line-height: 46px;
	/* border: 1px solid black; */
}
.main-bar-title {
	font-size: 12px;
	color: #505050;
}
.form input {
	width: 250px;
	height: 30px;
	box-sizing: border-box;
	padding-left: 10px;
}
.form button {
	width: 60px;
	height: 30px;
	background-color: #999;
	color: #fff;
}
.mainList {
	width: 320px;
	height: 1978px;
	/* border: 1px solid black; */
}
/* 弹幕列表 */
.mainList-top {
	position: relative;
	display: flex;
	justify-content: space-between;
	line-height: 46px;
	width: 320px;
	height: 46px;
	cursor: pointer;
	background-color: #f4f4f4;
	/* border: 1px dashed red; */
}
/* .mainList-nav .button {
	background-color: #00a1d6;
}
} */
/* background-color: #00a1d6;
} */

.mainList-top span {
	padding: 0 16px 0 16px;
}
.mainList-top .title {
	font-size: 16px;
}
.title-select {
	display: none;
	width: 320px;
	height: 359px;
	margin-left: -17px;
	border: 1px solid black;
}
/* .mainList-top span:hover .title-select {
	display: block;
} */
.mainList-nav {
	margin-top: 15px;
	width: 320px;
	height: 95px;
	cursor: pointer;
	/* 	border: 1px solid black; */
	background-color: #f4f4f4;
}
.mainList-dark {
	/* display: flex; */
	width: 320px;
	height: 80px;
	margin: 20px 0;
	/* border: 1px solid black; */
}

.mainList-dark img {
	display: inline-block;
	width: 140px;
	height: 80px;
}
.mainList-dark span {
	vertical-align: top;
	font-size: 14px;
}
.mainList-nav span {
	float: left;
	display: block;
	text-align: center;
	line-height: 36px;
	width: 64px;
	height: 36px;
	margin: 10px 10px;
	background-color: #fff;
	/* border: 1px solid black; */
}

.mainList-nav div {
	font-size: 16px;
}
.main-watch {
	width: 320px;
	height: 80px;
	margin: 20px 0;
	/* border: 1px solid black; */
}
.main-watch .pic img {
	width: 140px;
	height: 80px;
}
.main-watch {
	display: flex;
}
.main-watch .pic {
	position: relative;
}
.info a {
	margin-left: 10px;
	font-size: 14px;
	color: #222;
}
.info a:hover {
	color: #00a1d6;
	text-decoration: none;
}
.desc {
	margin: 6px 0 0 10px;
	color: #999;
}
.pic span {
	color: #fff;
	bottom: 10%;
	left: 10px;
	position: absolute;
	display: none;
}
.pic:hover span {
	display: block;
}
.video-desc {
	margin-top: 60px;
	width: 638px;
	height: 100px;
	border-bottom: 1px solid #999;
}
.video-desc span {
	padding-top: 10px;
}
.video-desc .tag {
	float: left;
	list-style: none;
	width: 80px;
	height: 22px;
	text-align: center;
	line-height: 22px;
	padding: 2px 7px;
	border-radius: 15px;
	/* margin: 90px 10px 0 10px; */
	/* border: 1px solid black; */
	color: #61616d;
	background-color: #f6f7f8;
}
.video-desc .tag:hover {
	border: 1px solid blue;
	text-decoration: none;
}
.common-head {
	font-size: 18px;
	margin: 50px 0;
	height: 50px;
	border-bottom: 1px solid #999;
}
.common-send {
	display: flex;
	justify-content: space-between;
	height: 110px;
	border-bottom: 1px solid #999;
}
.bili-avatar-img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.ipt-txt {
	padding-left: 10px;
	background-color: #f4f5f7;
	border: 1px solid #e5e9ef;
}
.ipt-txt:hover {
	border: 1px solid #00a1d6;
}
.user-arrow .common-submit {
	float: right;
	width: 70px;
	height: 64px;
	background-color: #00a1d6;
	border-radius: 5px;
	border: none;
	color: #fff;
}
.list-item {
	/* display: flex; */
	width: 638px;
	height: 250px;
	padding-top: 10px;
	border-bottom: 1px solid black;
}

/* .reply-con{
	display: flex;
	flex-wrap: wrap;
  
} */
.user-face {
	float: left;
}

.text-info {
	margin-left: 50px;
}
</style>
